<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>叩丁狼客户关系管理系统-登录</title>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/js/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/fonts.googleapis.com.css">

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <script src="/js/adminlte/js/adminlte.min.js"></script>
    <script src="/js/plugins/twbsPagination/jquery.twbsPagination.min.js"></script>
    <script src="js/plugins/messager/jquery.bootstrap.min.js"></script>
    <script src="js/plugins/jquery-form/jquery.form.js"></script>

    <!--表单提交插件-->

</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href="http://www.wolfcode.cn"><b>叩丁狼</b>CRM</a>
    </div>
    <div class="login-box-body">
        <p class="login-box-msg">请输入账号密码</p>

        <form method="post" id="loginForm" action="/login.do">
            <!--如果是表单开头,可以用插件提交,需加入action="/login.di" ,
            插件提交还可以上传文件enctype="multipart/form-data",根据需求添加
            -->
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="请输入账号" name="username" value="admin">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="请输入密码" name="password" value="1">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <button type="button" class="btn btn-primary btn-block btn-flat submitBtn">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    /*$(".submitBtn").click(function () {

        //发送ajax请求进行登录
        //发送参数,防止用户看到发送过去的信息,所以用post方法
        //通过表单的id:loginForm找到对应的参数,使用$拼接
        $.post('/login.do',$("#loginForm").serialize(),function (data) {

            //回调函数
            if (data.success){
                //跳转到员工页面或者部门页面
                window.location.href = "/department/list.do";
            }else{
                alert(data.msg)

                //插件,必须要引入D:\xuexi\rbac\src\main\webapp\js\plugins\messager\jquery.bootstrap.min.js
                //这个文件,由后端访问这个结果
                //$.message.popup(data.msg)
            }
        })
    })*/
    //jquery-form插件    $.get $post
    //先看有没有表单,有表单优先选择插件,
    //有表单时,看按钮的类型button 点击事件/ajaxSubmit   submit 页面加载完/ajaxForm
    //如果没有表单(比如权限列表只有删除功能)就选择后面$get   $.post

    //找到对应表单,
    //方法一:ajaxForm方法是会对该表单进行设置,改造为ajax方式提交(并不是马上提交),只有点登录按钮时(type="submit")才会提交
    /*$('#loginForm').ajaxForm(function (data) {
        //回调函数
        if (data.success){
            //跳转到员工页面或者部门页面
            window.location.href = "/department/list.do";
        }else{
            alert(data.msg)

            //插件,必须要引入D:\xuexi\rbac\src\main\webapp\js\plugins\messager\jquery.bootstrap.min.js
            //这个文件,由后端访问这个结果
            //$.message.popup(data.msg)
        }
    })*/
    //方法二:ajaxSubmit方法是会对表单进行设置,改为ajax的方法进行提交(马上提交),登录按钮(type="button")
    $(".submitBtn").click(function () {
        $("#loginForm").ajaxSubmit(function (data) {
            if (data.success){
                window.location.href = "/department/list.do";
            }else{
                alert(data.msg);
               // $.message.popup(data.msg)
            }
        })
    })
</script>
</body>
</html>

